<template>
  <rx-dialog @handOk="handleSubmit" @cancel="cancel">
    <rx-layout>
      <div slot="center">
        <a-form :form="form">
          <a-form-item style="display:none;">
            <a-input v-decorator="['id']"/>
            <a-input v-decorator="['listId']"/>
          </a-form-item>
          <a-row>
            <a-col :span="24">
              <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.policyName','策略名称')">
                <a-input :placeholder="i18n('form.policyName','策略名称')" v-decorator="['name', {rules: [{required: true, message: i18n('form.policyName','策略名称','input')}]}]"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.isPublic','是否公开')">
                <a-checkbox @change="isPublicChange" :checked="isPublic=='YES'" :placeholder="i18n('form.isPublic','是否公开')"
                            v-decorator="['isPublic']"/>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('form.queryCondition','查询条件')">
                <div class="table-operator">
                  <a-button type="primary" icon="plus" @click="addSearch">{{$ti18('rxList.add','新增')}}</a-button>
                  <a-button type="danger" icon="delete" @click="removeSearch">{{$ti18('rxList.delBtn','删除')}}</a-button>
                </div>
                <rx-grid ref="table"
                         :dataSource="fields"
                         :allowRowSelect="true"
                         :multiSelect="true"
                         :showPage="false"
                         :columns="columns"
                         style="height: 350px;">
              <span slot="fieldName" slot-scope="{text,record,index,blur}">
                <a-select labelInValue v-model="record.fieldName" @change="fieldNameChange($event,record,index,blur)"
                          @blur="blur(index,'fieldName',text,record)" :options="fieldDatas"></a-select>
              </span>
                  <span slot="fieldOp" slot-scope="{text,record,index,blur}">
                <a-select v-if="record.dataType==null || record.dataType=='S'" labelInValue v-model="record.fieldOp"
                          @blur="blur(index,'fieldOp',text,record)">
                  <a-select-option value="EQ">{{i18n('option.eq','等于')}}</a-select-option>
                  <a-select-option value="NEQ">{{i18n('option.neq','不等于')}}</a-select-option>
                  <a-select-option value="LK">{{i18n('option.lk','模糊匹配')}}</a-select-option>
                  <a-select-option value="LEK">{{i18n('option.lek','左模糊查询')}}</a-select-option>
                  <a-select-option value="RIK">{{i18n('option.rik','右模糊查询')}}</a-select-option>
                </a-select>
                <a-select v-else labelInValue v-model="record.fieldOp" @blur="blur(index,'fieldOp',text,record)">
                  <a-select-option value="EQ">{{i18n('option.neq','不等于')}}</a-select-option>
                  <a-select-option value="NEQ">{{i18n('option.neq','不等于')}}</a-select-option>
                  <a-select-option value="LT">{{i18n('option.lt','小于')}}</a-select-option>
                  <a-select-option value="LE">{{i18n('option.le','小于等于')}}</a-select-option>
                  <a-select-option value="GT">{{i18n('option.gt','大于')}}</a-select-option>
                  <a-select-option value="GE">{{i18n('option.ge','大于等于')}}</a-select-option>
                </a-select>
              </span>
                  <span slot="fieldValue" slot-scope="{text,record,index,blur}">
                <a-input v-if="record.dataType==null || record.dataType=='S'" v-model="record.fieldValue"
                         @blur="blur(index,'fieldValue',text,record)"/>
                <a-date-picker showTime format="YYYY-MM-DD"
                               v-else
                               v-model="text" @change="fieldValueChange($event,record,index,blur)"
                               @blur="blur(index,'fieldValue',text,record)"/>
              </span>
                </rx-grid>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </rx-layout>

  </rx-dialog>
</template>
<script>
  import FormQueryStrategyApi from '@/api/form/core/formQueryStrategy'
  import FormBoListApi from "@/api/form/core/formBoList"
  import {BaseForm, RxDialog, RxGrid} from "@lowcode/jpaas-common-lib"
  export default {
    name: 'FormQueryStrategyEdit',
    mixins: [BaseForm],
    props: ["listId"],
    components: {
      RxDialog,
      RxGrid
    },
    data() {
      return {
        isPublic: 'YES',
        fields: [],
        fieldDatas: [],
        columns: [{
          title: this.i18n('list.searchField','搜索字段'),
          dataIndex: 'fieldName',
          displayField: 'fieldName_name',
          allowCellEdit: true,
          width: 100,
          scopedSlots: {customRender: 'fieldName'}
        }, {
          title: this.i18n('list.comparator','比较符'),
          dataIndex: 'fieldOp',
          displayField: 'fieldOp_name',
          allowCellEdit: true,
          width: 100,
          scopedSlots: {customRender: 'fieldOp'}
        }, {
          title: this.i18n('list.searchValue','搜索值'),
          dataIndex: 'fieldValue',
          allowCellEdit: true,
          width: 100,
          scopedSlots: {customRender: 'fieldValue'}
        }]
      }
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"FormQueryStrategy",key);
      },
      onload_(values) {
        if (values) {
          this.isPublic = values.isPublic;
          this.listId = values.listId;
          if (values.queryCondition) {
            this.fields = JSON.parse(values.queryCondition);
          }
        }
        this.mdl = {listId: this.listId};
        this.form.setFieldsValue(this.mdl);
        this.getFieldData();
      },
      get(id) {
        return FormQueryStrategyApi.get(id);
      },
      save(values) {
        values.isPublic = this.isPublic;
        values.queryCondition = JSON.stringify(this.$refs.table.getData());
        return FormQueryStrategyApi.save(values);
      },
      getFieldData() {
        FormBoListApi.getEdit2(this.listId).then(data => {
          this.fieldDatas = data.fieldColumns.map(field => {
            return {label: field.header, value: field.field, key: field.queryDataType}
          });
        })
      },
      isPublicChange(e) {
        if (e.target.checked) {
          this.isPublic = "YES";
        } else {
          this.isPublic = "NO";
        }
      },
      fieldNameChange(text, record, index, blur) {
        for (var i = 0; i < this.fieldDatas.length; i++) {
          var field = this.fieldDatas[i];
          if (field.value == text.key) {
            record.dataType = field.key;
            break;
          }
        }
        blur(index, 'fieldName', text, record);
      },
      fieldValueChange(date, record, index, blur) {
        record['fieldValue'] = date.format('YYYY-MM-DD');
        blur(index, 'fieldValue', date.format('YYYY-MM-DD'), record)
      },
      addSearch() {
        this.$refs.table.addRow({});
      },
      removeSearch() {
        this.$refs.table.removeRows();
      }
    }
  }
</script>
